<template>
  <div>
    <MyHeader style="margin-bottom: 50px"></MyHeader>
    <RightShow></RightShow>
    <div style="width: 1200px;margin-left: 80px">
      <el-card class="box-card">
        <input placeholder="请输入你的标题" class="title_input" type="text" v-model="articleInfo.title">
        <h3>欢迎你</h3>
        <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 1500}"
            placeholder="请输入内容"
            v-model="articleInfo.text" style="font-size: 22px">
        </el-input>
      </el-card>
      <el-card style="margin-top: 50px">
        <h3>封面:</h3>
        <el-upload
            ref="upload"
            action="http://127.0.0.1:5000/article/putout"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :auto-upload="false"
            :data="articleInfo"
            :limit="1"
            :on-change="HaveUrl"
          >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog v-show="dialogVisible" >
          <i class="el-icon-close" style="font-size: 50px;position: absolute" @click="close"></i>
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <div style="margin-top: 20px;">
          <div style="margin-bottom: 10px">文章分类</div>
          <el-radio v-model="articleInfo.type" label="1" >情感</el-radio>
          <el-radio v-model="articleInfo.type" label="2">热血</el-radio>
          <el-radio v-model="articleInfo.type" label="3">技术</el-radio>
          <el-radio v-model="articleInfo.type" label="4">政治</el-radio>
        </div>
        <el-row style="margin-top: 50px">
          <el-button type="danger" @click="Putout">发布博客</el-button>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>
import MyHeader from "@/components/MyHeader";
import RightShow from "@/components/RightShow";
export default {
  name: "WriteArticle",
  components: {
    MyHeader,
    RightShow
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      isUrl:'',
      articleInfo:{
        text: "",
        title:'',
        type:'0',
        id:this.$store.state.commitSum.userID
      }
    }
  },
  methods: {
    handleAvatarSuccess(res, file){
      this.isUrl = URL.createObjectURL(file.raw);
    },
    HaveUrl(file){
      this.isUrl=URL.createObjectURL(file.raw)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true; 
      console.log(file.url)
    },
   
    close(){
      this.dialogVisible = false;
    },
    //发布按钮
    Putout(){
      console.log(this.isUrl)
      if(!this.articleInfo.title || !this.articleInfo.text || !this.isUrl ){
        this.$message({
          message:'标题、内容和封面不能为空',
          type:'error'
        })
      }else {
        this.$refs.upload.submit()
        this.$message({
          message:'文章发表成功',
          type:'success'
        })
        this.$router.push({name:'myBlog',params: { id: '1' }})
      }
    }
  }
}
</script>
<style scoped>
.title_input {
  width: 100%;
  height: 50px;
  font-size: 25px;
  border: none;
  outline: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
</style>